<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: LMJ
 * @Date: 2021-09-07 15:05:21
 * @LastEditors: LMJ
 * @LastEditTime: 2021-09-17 13:17:57
-->
<template>
  <div style="width: 100%; height: 100%">
    <div id="rightLine" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/grid");
require("echarts/lib/component/legend");
require("echarts/lib/chart/bar");

var charts = {};
export default {
  data() {
    return {
      chartData: [
        [120, 200, 150, 80, 75, 110, 530],
        [150, 200, 190, 580, 70, 130, 230],
        [120, 290, 150, 80, 50, 110, 120],
      ],
    };
  },
  created() {},
  mounted() {
    this.init();
    //根据浏览器宽度变化改变可视化报表图宽高
    window.addEventListener("resize", () => {
      charts.resize();
    });
  },
  methods: {
    init() {
      charts = echarts.init(document.getElementById("rightLine"));
      charts.setOption({
        title: {
          text: "每季度消耗统计",
          left: "center",
          textStyle: {
            color: "#06f1ef",
            fontSize: "14px",
          },
        },
        xAxis: {
          type: "category",
          data: ["01", "02", "03", "04", "05", "06", "07"],
          axisLine: {
            lineStyle: {
              color: "#06f1ef",
            },
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#06f1ef",
            },
          },
        },
        legend: {
          data: ["水量消耗", "电量消耗", "氢气消耗"],
          bottom: "1%",
          itemWidth: 18,
          itemHeight: 10,
          textStyle: {
            color: "white",
            fontSize: "11",
          },
        },
        grid: {
          left: "15%",
          right: "3%",
          bottom: "21%",
          top: "13%",
        },
        series: [
          {
            name: "水量消耗",
            data: this.chartData[0],
            type: "bar",
            stack: "total",
            label: {
              show: true,
              fontSize: 10,
              color: "#fff",
            },
            emphasis: {
              focus: "series",
            },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
          {
            name: "电量消耗",
            data: this.chartData[1],
            type: "bar",
            stack: "total",
            label: {
              show: true,
              fontSize: 10,
            },
            emphasis: {
              focus: "series",
            },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
          {
            name: "氢气消耗",
            data: this.chartData[2],
            type: "bar",
            stack: "total",
            label: {
              show: true,
              fontSize: 10,
            },
            emphasis: {
              focus: "series",
            },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
</style>
